<template>
    <div id="input-widget" class="r-border">
        <div id="mode-switcher" 
            v-tap="{methods: onModeChanged}" 
            :class="'modeof-' + mode"/>
        <ul id="inputrow">
            <li class="cell"
                v-for="(text, index) in numberArray"
                :class="'lengthof-' + numberArray.length"
                :selected="(index == selectedIndex)">
                    <button class="key" 
                        v-tap="{methods: onCellSelected, index: index}">{{ text }}</button>
                </li>
        </ul>
    </div>
</template>

<script>
module.exports = {
    props: ["numberArray", "mode", "selectedIndex"],
    methods: {
        onModeChanged: function(){
            this.$emit("onmodechanged");
        },
        onCellSelected: function(params){
            this.$emit("oncellselected", params.index);
        }
    }
}
</script>

<style scoped>
div#input-widget {
    border: 1px solid #cccccc;
}

div#mode-switcher {
    border-right: 1px solid #cccccc;
    -webkit-box-flex: 0.10;
    -webkit-flex: 0 1 10%;
    flex: 0 1 10%;
    text-align: center;
    background-position: center;
	background-repeat: no-repeat;
    background-size: 8.5vh;
}

@media all and (min-width:640px){ div#mode-switcher { background-size: 9vh; } }
@media all and (max-width:480px){ div#mode-switcher { background-size: 7vw; } }

ul#inputrow {
    -webkit-box-flex: 0.90;
    -webkit-flex: 0 1 90%;
    flex: 0 1 90%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
}

ul#inputrow > li{
    height: 100%;
}

ul#inputrow > li.lengthof-8 {
    -webkit-box-flex: 0.125;
    -webkit-flex: 0 1 12.5%;
    flex: 0 1 12.5%;
}

ul#inputrow > li.lengthof-7 {
    -webkit-box-flex: 0.1428;
    -webkit-flex: 0 1 14.28%;
    flex: 0 1 14.28%;
}

ul#inputrow > li.cell > button { font-size: 5vh; }
/*Landscape*/
@media all and (min-width:640px){
  ul#inputrow > li.cell > button { font-size: 9vh; }
}

/*Portrait*/
@media all and (max-width:480px) {
  ul#inputrow > li.cell > button { font-size: 7vw; }
}

ul#inputrow > li:not(:last-child) {
    border-right: 1px solid #cccccc;
}

ul#inputrow > li[selected=selected] {
    border: 1px solid #29a0dc;
}

/*Mode 5 新能源键盘图标启用状态 */
div#mode-switcher.modeof-5,div#mode-switcher.modeof-0 {
    background-image: url("");
}

/*Mode 0 新能源键盘图标禁用状态 */
div#mode-switcher.modeof-0 {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

</style>